<script setup>
import {FwbInput , FwbModal} from "flowbite-vue";
import {ref} from "vue";
import SvgIcon from "@/components/SvgIcon.vue";
const isShowModal = ref(false)
const closeModal = () => {
  isShowModal.value = false
}
const showModal = () => {
  isShowModal.value = true
}
const Random = (arr) => {
  return arr[Math.floor(Math.random() * arr.length)];
};
const cameraList = ref([])
for (let i = 0; i < 20; i++) {
  cameraList.value.push({
    id: i + 1,
    name: `Camera 00${i + 1}`,
    location: `https://polytronone.com/430-${i + 1}`,
    input: '',
    state: Random([true, false]),
  });
}
defineExpose({
  showModal,
})
const WDR = ref(true)
const sliderList = ref([
  {name: 'Brightness', icon: 'bright', value: 50},
  {name: 'Contrast', icon: 'contrast', value: 50},
  {name: 'Saturation', icon: 'saturation', value: 50},
  {name: 'Sharpness', icon: 'sharpness', value: 50},
  {name: 'White Balance', icon: 'balance', value: 50},
])
</script>

<template>
  <fwb-modal v-if="isShowModal" @close="closeModal" size="md" id="CreateModal">
    <template #header>
      <div class="text-lg flex flex-col text-sm text-[#9CA3AF] font-[500] font-Medium">
        <div class="">
          <p class="text-md">Image Settings</p>
        </div>
        <div class="absolute w-full h-[1px] bg-[var(--grid)] top-[111px] left-0 hidden"></div>
      </div>
    </template>

    <template #body>
      <div class="absolute w-full h-[1px] bg-[var(--grid)] top-[50px] left-0 s2k:top-[60px] s4k:top-[90px]"></div>
      <div class="w-full h-[570px]">
        <div class="w-full flex flex-col justify-center items-start mt-[32px] mb-[24px]">
          <p class="text-[20px] text-white">Image Settings</p>
        </div>
        <div class="w-full h-[442px] flex flex-row">
          <img src="@/assets/image/cover.png" alt class="flex-[1] w-full h-[233px]"/>
          <div class="flex-[1] h-full ml-[32px]">
            <div class="flex flex-row justify-between items-center">
              <span class="text-md font-[400] text-[#9CA3AF] cursor-pointer">Image Settings</span>
              <span class="text-[16px] font-[400] text-[#3F83F8] cursor-pointer">Reset All</span>
            </div>
            <div class="slider" v-for="v in sliderList" :key="v.name">
              <div class="text-md font-[400] text-[#9CA3AF] font-Inter flex flex-row justify-between items-center mt-[24px]">
                <div class="flex flex-row justify-start items-center">
                  <svg-icon :name="v.icon" class="svgClass s4ksvg s2ksvg" width="24px" height="24px"/>
                  <span class="ml-[4px]">{{ v.name }}</span>
                </div>
                <span>{{v.value}}</span>
              </div>
              <el-slider :show-tooltip="false" v-model="v.value" />
            </div>
            <div class="flex flex-row justify-between items-center text-md font-[400] text-[#9CA3AF] font-Inter mt-[24px]">
              <div class="flex flex-row justify-start items-center">
                <svg-icon name="WDR" class="svgClass s4ksvg s2ksvg" width="24px" height="24px"/>
                <span class="ml-[4px]">WDR</span>
              </div>
              <el-switch v-model="WDR" style="--el-switch-on-color: #1C64F2;"/>
            </div>
          </div>
          <div>
          </div>
        </div>
      </div>
    </template>
    <template #footer>
      <div class="absolute bottom-0 left-0 w-full h-[81px] border-t border-solid border-[var(--grid)] z-[999] flex flex-row justify-start items-center ">
        <div class="flex-[1]"></div>
        <div class="flex-[1] h-full ml-[32px] flex flex-row justify-center items-center">
          <div class="w-[196px] h-[41px] font-[500] text-white font-Medium text-md bg-[var(--grid)] rounded-lg flex cursor-pointer s4k:rounded-[8px]"><span class="m-auto">Cancel</span></div>
          <div class="w-[196px] h-[41px] font-[500] text-white font-Medium text-md bg-[#1C64F2] rounded-lg flex cursor-pointer ml-[8px] s4k:rounded-[8px]"><span class="m-auto">Apply Changes</span></div>
        </div>
      </div>
    </template>
  </fwb-modal>
</template>

<style scoped lang="scss">
#CreateModal {
  :deep(.max-w-md) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    max-width: 880px;
    height: 740px;
    button {
      cursor: pointer;
      &:hover {
        background: var(--theme);
      }

      svg {
        color: #6B7280;
      }
    }

    .bg-white {
      width: 100%;
      height: 100%;
      background-color: var(--theme);
    }
    .p-6 {
      padding-left: 1rem;
      padding-right: 1rem;
      padding-top: 0;
      .slider{
        .el-slider__bar{
          background: #1C64F2;
          height: 8px;
        }
        .el-slider__runway{
          background: #6B7280;
          height: 8px;
        }
        .el-slider__button{
          border-color: var(--theme-font-color);
        }
      }
    }
  }
}
@media screen and (min-width: 2560px) {
  .s4ksvg{
    transform: scale(1) !important;
  }
  #CreateModal {
    :deep(.max-w-md) {
      transform: scale(1.3);
      .el-slider__button{
        margin-bottom: 5px;
      }
    }
  }
}
@media screen and (min-width: 3840px) {
  //#CreateModal {
  //  :deep(.max-w-md) {
  //    max-width: 1760px;
  //    height: 1300px;
  //    button{
  //      svg{
  //        transform: scale(2);
  //      }
  //    }
  //    .p-4{
  //      padding-left: 2rem;
  //      padding-right: 2rem;
  //    }
  //    .p-6 {
  //      padding-left: 2rem;
  //      padding-right: 2rem;
  //      .list {
  //        overflow-y: scroll;
  //        scrollbar-width: none;
  //        -ms-overflow-style: none;
  //      }
  //      .slider{
  //        .el-slider__bar{
  //          height: 16px;
  //          border-radius: 20px;
  //        }
  //        .el-slider__runway{
  //          height: 16px;
  //          border-radius: 20px;
  //        }
  //        .el-slider__button{
  //          width: 40px;
  //          height: 40px;
  //          margin-bottom: 50px;
  //        }
  //      }
  //    }
  //  }
  //}
  //:deep(.el-switch__core){
  //  height: 40px;
  //  width: 80px;
  //  border-radius: 20px;
  //  .el-switch__action{
  //    width: 32px;
  //    height: 32px;
  //  }
  //}
  .s4ksvg{
    transform: scale(1) !important;
  }
  #CreateModal {
    :deep(.max-w-md) {
      height: 780px;
      transform: scale(2);
      .p-4{
        padding: 0.8rem;
      }
      .p-6{
        //margin-bottom: 2rem;
      }
      .el-slider__button{
        margin-bottom: 30px;
      }
    }
  }
}
</style>
